<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="同步时间">
      <div class="block">
        <el-select v-model="value" placeholder="请选择同步时间" @change="handleSelectChange" clearable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit(value)">保存</el-button>
      <el-button type="warning" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
  <!-- 遮罩层 -->
  <div v-if="uploadLoading" class="fullscreen-mask">
    <div style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);
    z-index:999; display:flex; justify-content:center; align-items:center;"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      uploadLoading: false, //全屏遮罩默认关闭
      options: [{
        value: '-1',
        label: '1天前'
      }, {
        value: '-2',
        label: '2天前'
      }, {
        value: '-3',
        label: '3天前'
      }, {
        value: '-4',
        label: '4天前'
      }, {
        value: '-5',
        label: '5天前'
      }, {
        value: '-6',
        label: '6天前'
      }, {
        value: '-7',
        label: '7天前'
      }],
      value: '-3',
      label: '3天前'
    }
  },
  methods: {
    //监测
    handleSelectChange(value) {
      console.log(value);
    },
    //保存
    async onSubmit(value) {
      this.loading = true;
      this.$confirm('是否确认保存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        //拦截弹窗关闭行为
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done(); //关闭确认弹窗
            this.uploadLoading = true;//开启全屏遮罩
            //显示正在上传提示
            const loadingMsg = this.$message({
              message: '正在保存',
              iconClass: 'el-icon-loading',
              duration: 0, //永久显示直到关闭
              showClose: false
            });
            //执行上传
            this.uploadSyncTime(value)
                .finally(() => {
                  loadingMsg.close(); //关闭上传提示
                  instance.confirmButtonLoading = false;
                });
          } else {
            done(); // 取消操作直接关闭弹窗
          }
        }
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '取消保存'
        })
      })
    },
    //上传
    async uploadSyncTime(value) {
      this.loading = true
      try {
        let res = await this.callApi('upload_sync_time', {value: value})
        if (!res.res) {
          this.$message.warning('保存未成功，请稍后重试或联系管理员');
          return;
        }
        this.uploadLoading = false; // 保存成功关闭遮罩
        this.$message.success(`保存成功`)
        setTimeout(() => {
          // window.opener.location.reload()
          // window.close()
        }, 1000)
      } finally {
        this.loading = false
      }
    },
    //取消并关闭页面
    async cancel() {
      this.$confirm('确定关闭并返回', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false
      }).then(() => {
        window.close()
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>
